<script setup lang="ts">
import {accessRecordsDB, hotDB, movieDB} from '@/data/lowdb.ts'
import {computed, onMounted, provide, ref} from 'vue'
import {AccessRecord, HotDreamVideo, Movie} from '@/data/Dream'
import {sortByAccessRecords} from '@/data/access_records.ts'
import {getMovieIdObjByVideo, openVideoDefault} from '@/utils/utils.ts'
import HotSomePictures from '@/pages/hot/components/hot-some-pictures.vue'
import HotThreePictures from '@/pages/hot/components/hot-three-pictures.vue'

const hotDreamVideos = ref<HotDreamVideo[]>([])
const videoAccessRecords = ref<Map<string, AccessRecord>>()
provide('videoAccessRecords', videoAccessRecords)

onMounted(() => {
  videoAccessRecords.value = new Map<string, AccessRecord>(
      Object.entries(accessRecordsDB.get('videoAccessRecords').value())
  )
  const hots: string[] = hotDB.read().value()
  const movies: Movie[] = movieDB.read().value()

  for (let hot of hots) {
    const {name, year} = getMovieIdObjByVideo(hot)
    for (let m of movies) {
      if (year === m.year && name === m.name) {
        for (let dreamVideo of m.dreamVideos) {
          if (hot === dreamVideo.video) {
            let hotDreamVideo: HotDreamVideo = <HotDreamVideo>{}
            Object.assign(hotDreamVideo, dreamVideo)
            hotDreamVideo.movie = m
            hotDreamVideos.value.push(hotDreamVideo)
          }
        }
      }
    }
  }
})

// 数据库里所有的 dreamVideos，排访问时间逆序
const dreamVideos = computed(() => {
  return hotDreamVideos.value.sort((a, b) => {
    return sortByAccessRecords(
        videoAccessRecords.value.get(a.video), videoAccessRecords.value.get(b.video)
    )
  })
})
// 3 张图片
const dreamVideos3 = computed(() => {
  return dreamVideos.value.filter((v) => v.images.length === 3)
})
// 3 张以上图片
const dreamVideosManyImg = computed(() => {
  return dreamVideos.value.filter((v) => v.images.length > 3)
})
// 1、2 张图片
const dreamVideosFewImg = computed(() => {
  return dreamVideos.value.filter((v) => v.images.length === 1 || v.images.length === 2)
})

function openHotVideo(video: HotDreamVideo) {
    openVideoDefault(video.movie, video.video, videoAccessRecords.value)
}
</script>

<template>
  <div id="dreamVideoDiv">

    <div class="video-container">
      <div class="video" v-for="video in dreamVideos3" :key="video.video"
           @contextmenu.prevent="openHotVideo(video)"
      >
        <hot-three-pictures :movie="video.movie"
                            :video="video"
        />
      </div>
    </div>

    <hr v-if="dreamVideos3.length > 0 && (dreamVideosManyImg.length > 0 || dreamVideosFewImg.length > 0)">

    <div class="dreamVideosManyImg" v-if="dreamVideosManyImg.length > 0">
      <div class="video" v-for="video in dreamVideosManyImg" :key="video.video"
           @contextmenu.prevent="openHotVideo(video)"
      >
        <hot-some-pictures :movie="video.movie"
                         :video="video"
        />
      </div>
    </div>

    <hr v-if="dreamVideosManyImg.length > 0 && dreamVideosFewImg.length > 0">

    <div class="dreamVideosFewImg" v-if="dreamVideosFewImg.length > 0">
      <div class="video" v-for="video in dreamVideosFewImg" :key="video.video"
           @contextmenu.prevent="openHotVideo(video)"
      >
        <hot-some-pictures :movie="video.movie"
                         :video="video"
        />
      </div>
    </div>

  </div>
</template>

<style lang="stylus" scoped>
.video
  background white
  border-radius 5px
  border 2px solid #f4f4f4
  &:hover
    border 2px solid #00BE9A;

.dreamVideosManyImg, .dreamVideosFewImg
  margin-bottom 10px
  .video
    margin-bottom: 15px
.dreamVideosFewImg
  display: flex
  flex-wrap: wrap
  justify-content: space-around


.video-container
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .video
    margin-bottom: 5px;


.dreamVideosNoImg
  font-size: 16px;
  margin: 20px auto 0;
  width: max-content;
.refreshButton
  width: max-content
  margin: 10px auto 0
hr
  margin-bottom: 20px
  border: none;
  height: 0.5px;
  background: #c8c4c4;
</style>
